<template>
  <CDialog
    title="生成规则"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :loading="loading"
    size="small"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <!-- 规则类型 -->
        <el-col :span="24">
          <el-form-item label="规则类型" prop="ruleCategory">
            <CSelect v-model="formData.ruleCategory" placeholder="请选择">
              <el-option
                v-for="item in MaterialsClassificationOptions"
                :value="item.value"
                :key="item.value"
              >
                <div class="g-flex-between-center">
                  <span class="g-mr10">{{ item.label }}</span>
                  <span class="g-font-12n4">{{ item.subTitle }}</span>
                </div>
              </el-option>
            </CSelect>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="适用标准" prop="applicableStandard">
            <CSelect
              v-model="formData.applicableStandard"
              placeholder="请选择"
              multiple
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="3"
            >
              <el-option
                v-for="item in StandardOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              >
              </el-option>
            </CSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'GenerateRuleDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch, reactive } from 'vue';
import { MaterialsClassificationOptions } from '@/constants/system';
import { StandardOptions } from '@/constants/pcf';
import { CSelect } from '@/components/CSelect';
import { CDialog } from '@/components/CDialog';
import { useMessage } from '@/hooks/useMessage';
import { batchGenerate } from '@/apis/system/config/factorMatchingRule';

interface ConnectFactoryDialogProps {
  visible: boolean;
  ruleNo?: string;
}
const props = withDefaults(defineProps<ConnectFactoryDialogProps>(), {
  visible: false
});
const emit = defineEmits(['update:visible', 'refresh', 'refreshFactorMatchRuleList']);

const { createMessage } = useMessage();

const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    handleClear();
  }
);

const formRef = ref();
const loading = ref(false);
const formData = reactive({
  ruleCategory: '',
  applicableStandard: [] as string[]
});

// 提交按钮
async function handleConfirm() {
  try {
    await formRef.value?.validate();
    await batchGenerate({
      ruleNoList: [props.ruleNo || ''],
      ruleCategory: formData.ruleCategory,
      applicableStandard: formData.applicableStandard
    });
    createMessage.success('生成成功！');
    emit('refresh');
    emit('refreshFactorMatchRuleList');
    dialogVisible.value = false;
  } catch (error) {
    console.log(error);
  }
}

// 关闭时清空数据
function handleClear() {
  loading.value = false;
  formRef.value?.resetFields();
  formData.applicableStandard = [];
  formData.ruleCategory = '';
}

const rules = {
  ruleCategory: [
    {
      required: true,
      message: '必填项',
      trigger: ['submit', 'change']
    }
  ],
  applicableStandard: [
    {
      required: true,
      message: '必填项',
      trigger: ['submit', 'change']
    }
  ]
};
</script>
